<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom linkId="usr1467k5vie9ucb" :linkData="linkData"></HeadCustom>
		<view class="wrap">
			<view class="title font34">{{detail.dynamicName}}</view>
			<view class="info fboxRow Ycenter">
				<view class="logo"></view>
				<view class="name"></view>
				<view class="time lh38 font26 color-6B707C mt8">{{detail.gmtCreate}}</view>
			</view>
			<!-- <view class="line"></view> -->
			<view class="content mt32 font30 lh44" v-html="detail.dynamicDetail" style="white-space: pre-wrap;"></view>
		</view>
		<view class="space-block"></view>
		
		<!-- <view class="fixed-space"></view>
		<view class="fixed-action fboxRow Ycenter bg-1A1D25">
			<view class="flex1"><view class="btn fboxRow Ycenter Xcenter color-6B707C"><view class="flex1">发表评论</view> <text class="bwfont bw-biaoqing"></text></view></view>
			<view class="action-group fboxRow Ycenter">
				<view class="action-item">
					<u-icon name="chat" size="24" color="#6B707C"></u-icon>
				</view>
				<view class="action-item" @click="collect">
					<u-icon :name="detail.isCollected ? 'thumb-up-fill': 'thumb-up'" size="24" :color="detail.isCollected ? '#E8CDA7': '#6B707C'"></u-icon>
				</view>
				<view class="action-item" @click="collect">
					<u-icon :name="detail.isCollected ? 'star-fill': 'star'" size="24" :color="detail.isCollected ? '#E8CDA7': '#6B707C'"></u-icon>
				</view>
			</view>
		</view> -->
		<Comments
			id="space-back"
			:list="comments"
			:commentNum="detail.commentNum"
			:likeNum="detail.likeNum"
			:forwardNum="detail.forwardNum"
			type="enterprise"
		/>
		<u-loadmore fontSize="24rpx" :status="page.loading" />
		<not-login ref="notLogin" />
	</view>
</template>

<script>
	import {companyDynamicDetail, companyDynamicComments} from '@/api/card.js';
	import Comments from '@/components/circle/comments.vue';
	export default {
		components: {
			Comments
		},
		data() {
			return {
				theme: getApp().globalData.appTheme,
						globalColor: getApp().globalData.globalColor,
				detail: {},
				id: '',
				linkData: {id: ''},
				page: {
					current: 1,
					size: 20,
					total: 0,
					loading: 'loading'
				},
				comments: []
			}
		},
		onLoad(options) {
			if(options && options.dynamicId){
				this.id = options.dynamicId
				this.linkData= {id:options.dynamicId}
			}
			this.getComments()
		},
		onShow() {
			this.getInit()
		},
		methods: {
			getInit() {
				companyDynamicDetail({id: this.id}).then(res=>{
					this.detail = res.data
					this.detail.isCollected= false
					uni.setNavigationBarTitle({
						title: `${res.data.dynamicName}-水花详情`
					})
				})
			},
			collect(){
				console.log('收藏')
				this.detail.isCollected = !this.detail.isCollected
			},
			getComments(){
				companyDynamicComments({
					dynamicId: this.id,
					current: this.page.current,
					size: this.page.size,
				}).then(res=>{
					this.comments = res.data.list
					this.page.total = res.data.total;
					const {total, current, size} = res.data
					if (total < current * size) {
						this.page.loading = 'nomore';
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-wrap{background-color: var(--viewBgColor);padding: 0 0 30rpx;}
	
	.space-block{background-color: var(--controllerBgColor);}
	.title{line-height: 50rpx;}
	.wrap{padding: 40rpx 32rpx;}
	.wrap .content{color:var(--contentFontDarkColor)}
	.wrap /deep/ img{margin-top: 24rpx; max-width: 100%; border-radius: 12rpx;overflow: hidden;}
	.line {
		margin: 24rpx auto;
		width: 670rpx;
		height: 1rpx;
		background: var(--backgroundDivisionColor);
	}
	
	.fixed-space{height: 160rpx;}
	.fixed-action{position: fixed;left: 0;;right: 0; bottom: 0;padding: 14rpx 40rpx 58rpx;}
	.fixed-action .btn{ padding: 0 23rpx; height: 76rpx;background-color: var(--viewBgColor); border-radius: 40rpx;}
	.fixed-action .action-item{ margin-left:32rpx;}
	
</style>